<template>
  <div>
    <el-dialog :model-value="teacherDialog" :close-on-click-modal="false" :before-close="handleClose" title="可见老师">
          <div>
            <el-form 
            ref="ruleFormRef"
            :model="ruleForm"
            label-width="40px"
            class="demo-ruleForm"
            size="default"
            status-icon
            style="display: flex;"
          >
            <el-form-item label="部门" style="margin-right:50px">
              <el-select v-model="ruleForm.depid" clearable placeholder="选择部门" @change="depChange">
                  <el-option
                    v-for="item in data.dapInfo"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
            </el-form-item>
            </el-form>
          </div>
           <div class="dialog">
              <el-transfer v-model="teacherid"   @left-check-change="leftChange" @right-check-change="rightChange"  :right-default-checked="teacherid" :titles="['未选', '已选']" :props="{
                  key: 'id',
                  label: 'name',
              }"  :data="data.teacherInfo">
                  <template #default="{ option }">
                      <span>{{ option.name }}</span>
                  </template>
              </el-transfer>
          </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="updatateacher" v-if="props.id"
          >确定</el-button
          >
          <el-button type="primary" @click="submit" v-else
          >确定</el-button
          >
          
        </span>
      </template>
    </el-dialog>
    
  </div>
  </template>
  <script lang='ts' setup>
  import { reactive,toRefs,ref,defineProps,defineEmits  } from 'vue'
  import {department_list,teacher_list,test_getlimit,testlimit_add} from "../../api/test"
  import {ElMessage} from "element-plus"
  const emits = defineEmits(['update:modelValue','teacherIds'])
  
  const props = defineProps({
    //子组件接收父组件传递过来的值
    id: Number,
    markteachers:Array
  })
  const data:any=reactive({
    teacherid:[],//穿梭框选择id
    ruleForm:{
      depid:'',//部门id
      testid:''//考试id
    },
    dapInfo:[],//部门列表
    teacherInfo:[],//教师列表
    tids:'',//穿梭id
    markteachersIds:props.markteachers
  })
  
  const {teacherid,markteachersIds,ruleForm}=toRefs(data)
  const teacherDialog = ref(true)
  
  
  
  // 部门列表
  const depList= async()=>{
    const res:any = await department_list({})
    // console.log(res);
    if(res.errCode=='10000'){
        data.dapInfo=res.data.list
    }
    
  }
  depList()
 
  // 老师列表
  const Tlist=async ()=>{
    const res:any=await teacher_list({depid:ruleForm.value.depid,psize:100})
    // console.log(res);
    if(res.errCode=='10000'){
        data.teacherInfo.push(...res.data.list)
    }
  }

  const limitList=async ()=>{
    const res:any=await test_getlimit({testid:props.id})
    console.log(res);
    
    if(res.errCode=='10000'){
        data.teacherInfo=res.data
        teacherid.value=res.data.map((item:any)=>item.id)
    }
  }
  // 部门搜索
  const depChange=()=>{
    Tlist()
  }
  

  if(props.id){
    limitList()
    Tlist()
  }else{
    Tlist()
    if(markteachersIds.value.length>0){
      teacherid.value=markteachersIds.value.map((item:any)=>item.id)
}
   
  }
 
const rightChange=(e:any,i:any)=>{
  teacherid.value = teacherid.value.filter(
    (item: any) => item != i
  );
}
const leftChange=(e:any)=>{
  teacherid.value.push(...e)

}
  const handleClose = () => {
    emits('update:modelValue', false) 
  }
  const submit=()=>{
    let arr=teacherid.value.map((item:any)=>({id:item}))
    emits('teacherIds',arr)
    emits('update:modelValue', false) 
  }
  const updatateacher= async()=>{
    let list=[]
    list=teacherid.value.map((item:any)=>({id:item}))
    const res:any=await testlimit_add({testid:props.id,list})
    if(res.errCode == '10000'){
    ElMessage({
      message:"修改成功",
      type:"success"
    })
    emits('update:modelValue', false) 
  }
    
  }
  
  </script>
  
  <style scoped lang="less">
  :deep(.el-transfer) {
    display: flex;
    justify-content: space-between;
  }
  :deep(.el-transfer-panel) {
    width: 40% !important;
  }
  :deep(.el-transfer__buttons) {
    display: none;
  }
   .el-dialog {
          &.stuadd {
              display: flex;
              flex-direction: column;
              margin: 0 auto;
              margin-top: 5vh;
              height: 80vh;
  
              .el-dialog__body {
                  flex: 1;
                  overflow-y: auto;
              }
          }
      }
  
      textarea {
          height: 100px;
      }
  
      .el-upload-list {
          width: 500px;
      }
  
  </style>